<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href='@{~/plug-in/pear/css/pear.css}' media="all">
    <link rel="stylesheet" th:href='@{~/css/base.css}'>
    <style>
        .layui-timeline-item:before {
            content: "";
            position: absolute;
            left: 3px;
            top: 0;
            z-index: 0;
            width: 4px;
            height: 100%;
            background-color: #e5e5e5
        }
        .layui-timeline-axis{
            font-weight: bold;
        }
    </style>
    <script th:inline="javascript" type="text/javascript">
        var formValue = [[${formValue}]]
        var isSelect = [[${isSelect}]]
        var timeline = [[${timeLine}]]
    </script>
</head>
<body style="display: flex">
<div class="form-box" style="flex: 1" th:utext="${html}"></div>
<div class="page-content" style="flex: 1">
    <div class="line-box" style="padding: 20px;padding-right: 50px"></div>
</div>

<script type="text/html" id="lineTemp">
    <ul class="layui-timeline">
        {{#  layui.each(d, (index, data)=>{ }}
        <li class="layui-timeline-item">
            {{#  if(data.state == 1){ }}
            <i class="layui-icon layui-timeline-axis layui-anim layui-anim-rotate layui-anim-loop"></i>
            {{#  }else{ }}
            {{#  if(data.state == 3 || data.remark == 'no'){ }}
            <i class="layui-icon layui-timeline-axis" style="color: #f44336"></i>
            {{#  } else{ }}
            <i class="layui-icon layui-timeline-axis" style="color: #5fb878"></i>
            {{#  } }}
            {{#  } }}
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">
                    {{#  if(data.state !== 4){ }}
                    {{data.assignee}}
                    {{#  } else{ }}
                    流程结束
                    {{#  } }}
                </h3>
                <p>
                    {{#  if(data.processingTime){ }}
                    {{data.processingTime}}<br>
                    {{#  } }}
                    {{#  if(data.state==4){ }}
                    结果
                    {{#  } }}
                    {{#  if(data.remark=="ok"){ }}
                    <span class="layui-badge layui-bg-green">通过</span>
                    {{#  } else if(data.remark=="no"){ }}
                    <span class="layui-badge">不通过</span>
                    {{#  }else{ }}
                    {{data.remark}}
                    {{#  } }}

                    {{#  if(data.state == 1){ }}
                    <span class="layui-badge layui-bg-black">待执行</span>
                    {{#  } else if(data.state == 2){ }}
                    <span class="layui-badge layui-bg-green">同意</span>
                    {{#  } else if(data.state == 3){ }}
                    <span class="layui-badge">拒绝</span>
                    {{#  } }}
                </p>
            </div>
        </li>
        {{#  }) }}
    </ul>
</script>
<script type="text/javascript">
    if (timeline){
        layui.laytpl(lineTemp.innerHTML).render(timeline, (html)=>{
            $(".line-box").html(html)
        })
    }else {
        $(".page-content").remove()
    }
</script>
</body>
</html>